.home_box {
  position: relative;
  width: 100vw;
  height: 100vh;
  .home_top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    &>div {
      padding: 0 0.3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &>div {
        display: flex;
        align-items: center;
      }
    }
    .top_nav {
      height: 0.5rem;
      line-height: 0.5rem;
      .icon,
      span {
        font-weight: 600;
        cursor: pointer;
      }
    }
    .top_title {
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.2rem;
      color: #666;
      cursor: pointer;
      &>span.active {
        color: rgb(243, 128, 49);
      }
    }
  }
  .home_main {
    #container {
      width: 100%;
      height: 100%;
    }
    .center_icon {
      position: absolute;
      left: 50%;
      bottom: 50%;
      margin-left: -10px;
      font-size: 20px;
      width: 20px;
      height: 20px;
      font-weight: 600;
    }
    .run {
      animation:run 1s;
    }
  }
  .home_bottom {
    position: fixed;
    left: 0.3rem;
    right: 0.3rem;
    bottom: 1rem;
    height: 3.7rem;
    background: #fff;
    .bottom_top {
      margin:  0 auto;
      padding: 0.3rem 0 0.5rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 3rem;
      .top_icon {
        display: inline-block;
        width: 1.2rem;
        height: 0.6rem;
        line-height: 0.6rem;
        border-radius: 0.3rem;
        text-align: center;
      }
      .top_icon.active {
        border: 0.01rem solid rgb(229,229,229);
      }
    }
    z-index: 99;
    .start,
    .end {
      padding: 0 0.3rem;
      padding-top: 0.1rem;
      padding-bottom: 0.2rem;
      display: flex;
      align-items: center;
      font-size: 0.3rem;
      font-weight: 600;
      &>div {
        flex-grow: 2;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.3rem;
        border: none;
      }
    }
    .border_middle {
      width: 100%;
      height: 1px;
      background: rgb(229,229,229);
    }
  }
  .about_local_box {
    position: fixed;
    left: 0;
    top: 100%;
    right: 0;
    bottom: 0;
    background: #f2f2f2;
    z-index: 100;
    .about_top {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 0.8rem;
      font-size: 0.34rem;
      line-height: 0.8rem;
      background: #fff;
      border-bottom: 0.01rem solid rgb(238, 238, 238);
      .about_top_l {
        margin: 0 0.2rem;
        border-right: 0.01rem solid rgb(238, 238, 238);
        height: 0.8rem;
        line-height: 0.8rem;
      }
      &>input {
        line-height: 0.4rem;
        border:none;
        width: auto;
      }
      .about_top_r {
        padding: 0 0.2rem;
        font-size: 0.34rem;
        height: 0.4rem;
        line-height: 0.4rem;
        border-left: 0.01rem solid rgb(238, 238, 238);
      }
    }
    .munu_item_box {
      position: absolute;
      left: 0;
      top: 0.81rem;
      right: 0;
      bottom: 0;
      padding: 0.2rem;
      .munu_item {
        width: 100%;
        height: 100%;
        border: 0.01rem solid rgb(238, 238, 238);
        border-radius: 0.1rem;
        background: #fff;
        overflow: auto;
        .item_li {
          display: flex;
          align-items: center;
          border-bottom: 0.01rem solid rgb(238, 238, 238);
          &>.icon {
            margin-right: 0.2rem;
            padding-left: 0.5rem;
            font-size: 0.3rem;
          }
          .item_name {
            padding: 0.1rem 0;
            line-height: 0.4rem;
          }
          .item_add {
            padding-bottom: 0.1rem;
            line-height: 0.3rem;
            color: #999999;
          }
        }
      }
      .munu_item::-webkit-scrollbar {
        display: none;
        width:0px;
      }
    }
  }
  .on {
    top: 0;
    animation: all 2s;
  }
  .off {
    top: 100%;
    animation: all 2s;
  }
}

@keyframes run{
  0%{margin-bottom: 0;}
  20%{margin-bottom: 5px;}
  50%{margin-bottom: 10px;}
  70%{margin-bottom: 0;}
  85%{margin-bottom: 5px;}
  100%{margin-bottom: 0;}
}
@keyframes on{
  0%{top:100%;}
  10%{top:90%;}
  20%{top:80%;}
  30%{top:70%;}
  40%{top:60%;}
  50%{top:50%;}
  60%{top:40%;}
  70%{top:30%;}
  80%{top:20%;}
  90%{top:10%;}
  100%{top:0;}
}
.clear15 {height: 0.15rem;}
.clear20 {height: 0.20rem;background: #f2f2f2;}
.clear25 {height: 0.25rem;}
.clear30 {height: 0.30rem;}
.clear35 {height: 0.35rem;}
.clear40 {height: 0.40rem;}
.clear45 {height: 0.45rem;}
.clear50 {height: 0.50rem;}
.clear55 {height: 0.55rem;}
.clear60 {height: 0.60rem;}
.clear65 {height: 0.65rem;}
.clear70 {height: 0.70rem;}
.clear75 {height: 0.75rem;}
.clear160 {height: 0.160rem;}

.color_red {color: #ff262c;}
.color_font,.color_333 { color: #333333;}
.color_666 { color: #666666;}
.color_hui,.color_999 {color: #999999;}
.color_fff {color: #fff;}
.color_main {color: #FFD100;}
.color_10 {color: #101010;}
.color_00 {color: #000000;}


.back_main {background: #FFD100;}
.back_red {background: #ff262c;}
.back_hui {background: #f2f2f2;}
.back_fff {background: #fff;}


.font_22 {font-size: 0.22rem;line-height: 0.22rem;}
.font_24 {font-size: 0.24rem;line-height: 0.24rem;}
.font_26 {font-size: 0.26rem;line-height: 0.26rem;}
.font_28 {font-size: 0.28rem;line-height: 0.28rem;}
.font_30 {font-size: 0.30rem;line-height: 0.30rem;}
.font_32 {font-size: 0.32rem;line-height: 0.32rem;}
.font_34 {font-size: 0.34rem;line-height: 0.34rem;}
.font_36 {font-size: 0.36rem;line-height: 0.36rem;}
.font_40 {font-size: 0.40rem;line-height: 0.40rem;}

.mar_t_10 {margin-top:0.10rem; }
.mar_t_20 {margin-top:0.20rem; }
.mar_t_25 {margin-top:0.25rem; }
.mar_t_30 {margin-top:0.30rem; }
.mar_t_35 {margin-top:0.35rem; }
.mar_t_40 {margin-top:0.40rem; }
.mar_b_10 {margin-bottom: 0.10rem;}
.mar_b_20 {margin-bottom: 0.20rem;}
.mar_b_25 {margin-bottom: 0.25rem;}
.mar_b_30 {margin-bottom: 0.30rem;}
.mar_b_35 {margin-bottom: 0.35rem;}
.mar_b_40 {margin-bottom: 0.40rem;}
.mar_r_10 {margin-right: 0.10rem;}
.mar_r_20 {margin-right: 0.20rem;}
.mar_r_30 {margin-right: 0.30rem;}
.mar_r_40 {margin-right: 0.40rem;}
.mar_l_10 {margin-left: 0.10rem;}
.mar_l_20 {margin-left: 0.20rem;}
.mar_l_30 {margin-left: 0.30rem;}

.pad_t_10 {padding-top:0.10rem; }
.pad_t_20 {padding-top:0.20rem; }
.pad_t_25 {padding-top:0.25rem; }
.pad_t_30 {padding-top:0.30rem; }
.pad_t_35 {padding-top:0.35rem; }
.pad_t_40 {padding-top:0.40rem; }
.pad_b_20 {padding-bottom: 0.20rem;}
.pad_b_25 {padding-bottom: 0.25rem;}
.pad_b_30 {padding-bottom: 0.30rem;}
.pad_b_35 {padding-bottom: 0.35rem;}
.pad_b_40 {padding-bottom: 0.40rem;}
.pad_r_10 {padding-right: 0.10rem;}
.pad_r_20 {padding-right: 0.20rem;}
.pad_r_30 {padding-right: 0.30rem;}
.pad_r_40 {padding-right: 0.40rem;}
.pad_l_10 {padding-left: 0.10rem;}
.pad_l_20 {padding-left: 0.20rem;}
.pad_l_30 {padding-left: 0.30rem;}

.pad_30 { padding: 0.30rem;}